<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>组合对话框新增/编辑</title>
        <#include "/pubHeadStyle.html">
        <link rel="stylesheet" href="${ctx}/css/form.css">
    </head>
    <body>
<form class="layui-form" lay-filter="formData" id="formData" style="background: #fff; height: 400px;overflow-y: auto;">
    <div class="layui-btn-container" style="position: absolute;bottom: 0;left:40%">
        <a class="layui-btn" lay-submit="" lay-filter="save">保存</a>
        <a class="layui-btn layui-btn-danger cancel" >取消</a>
    </div>
    <div class="formDefSearch">
        <div class="layui-form-item" style="padding-top:14px;">
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 100px">名称: <span style="color:red;">*</span></label>
                <div class="layui-input-inline">
                    <input type="text" name="name" id="combinationName" style="width:200px" class="layui-input"
                           lay-verify="required" autocomplete="off"/>
                </div>
                <div style="float: left;margin-left: 58px;">
                    <label class="layui-form-label" style="width: 100px;">别名:<span style="color:red;">*</span> </label>
                    <div class="layui-input-inline">
                        <input type="text" name="alias" style="width: 200px" id="combinationAlias" class="layui-input"
                               lay-verify="required"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 100px;">宽度: <span style="color:red;">*</span></label>
                <div class="layui-input-inline">
                    <input type="text" name="width" style="width:200px" class="layui-input"
                           lay-verify="required|positiveInteger" autocomplete="off" value="800"/>
                </div>
                <div style="float: left;margin-left: 58px;">
                    <label class="layui-form-label" style="width: 100px;">高度:<span style="color:red;">*</span> </label>
                    <div class="layui-input-inline">
                        <input type="text" name="height" style="width: 200px"  class="layui-input"
                               lay-verify="required|positiveInteger" value="600"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 100px;">左侧树对话框: <span style="color:red;">*</span></label>
                <div class="layui-input-inline">
                    <input type="text" name="treeDialogName" style="width: 137px;float: left;"  class="layui-input treeDialog" readonly />
                    <button class="layui-btn layui-btn-sm dialogButton" type="button"  style="float: left;margin-top: 4px;margin-left: 5px;">选择</button>
                </div>
                <div style="float: left;margin-left: 58px;">
                    <label class="layui-form-label" style="width: 100px;">右侧列对话框:<span style="color:red;">*</span> </label>
                    <div class="layui-input-inline">
                        <input type="text" name="listDialogName" style="width: 137px;float: left;"  class="layui-input colDialog" readonly />
                        <button class="layui-btn layui-btn-sm dialogButton" type="button" style="float: left;margin-top: 4px;margin-left: 5px;">选择</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item rule" style="display: none;">
            <div class="layui-block">
                <label class="layui-form-label" style="width: 100px;">组合规则: <span style="color:red;">*</span></label>
                <div class="layui-input-inline" style="width:259px;">
                    <label class="layui-form-label" style="width: 74px;">返回树字段:</label>
                    <div class="treeProvince">
                        <select name="province" id="province" lay-filter="province">
                            <option value="">全部</option>
                            <option value="0">自定义表</option>
                            <option value="1">由表单生成</option>
                        </select>
                    </div>

            </div>
                <div class="layui-input-inline" style="width:270px;">
                    <label class="layui-form-label" style="width: 90px;">列表条件字段:</label>
                    <div class="colgenByForm">
                    <select name="genByForm" id="genByForm"  lay-filter="genByForm">
                        <option value="">全部</option>
                        <option value="0">自定义表</option>
                        <option value="1">由表单生成</option>
                    </select>
                    </div>
                    <a class="layui-btn layui-btn-sm addRow" style="position: absolute;margin-top: 4px;margin-left: 2px;">添加</a>
                </div>
            </div>
        </div>
        <div class="layui-form-item rowData">
            <div class="row" style="padding-left:16%;"></div>
        </div>
    </div>
</form>
<script>
    var treeId = '';
    var listId = '';
    //组合对话框id
    var combinationId = '${combinationId}';
    //被选中的树和列表对话框
    var treeDialog;
    var listDialog;

    layui.config({
        base: serverPath.formPath + staticPath.formPath //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(['index', 'setter', 'layer', 'layedit', 'laydate', 'commons', 'form', 'jquery', 'layer', 'common', 'table'], function () {
        var form = layui.form
            , layer = layui.layer,commons=layui.commons;
        var setter = layui.setter;
        var $ = layui.$;
        var treeValue;
        var colValue;
        var treeValueField;
        var listValueField;
        //回填数据
        if(combinationId !== ''){
            $.ajax({
                url: serverPath.formPath + setter.formLinkPath +"formDialog/combinationDialog/edit",
                type: "get",
                contentType: 'application/json',
                dataType: 'json',
                data:{"combinationId":combinationId},
                success: function (result) {
                    if (result.code === 0) {
                        var combinationDialog = result.data;
                        listId = combinationDialog.listDialogId;
                        treeId = combinationDialog.treeDialogId;
                        listDialog = combinationDialog.listDialog;
                        addDialogFieldOption(listDialog);
                        treeDialog = combinationDialog.treeDialog;
                        addDialogFieldOption(treeDialog);
                        form.val('formData',{
                            "name":combinationDialog.name
                            ,"alias":combinationDialog.alias
                            ,"width":combinationDialog.width
                            ,"height":combinationDialog.height
                            ,"treeDialogName":combinationDialog.treeDialogName
                            ,"listDialogName":combinationDialog.listDialogName
                        });
                        var combinationField = JSON.parse(combinationDialog.field);
                        for(var index in combinationField){
                            var tr = $('<tr><td><div class="editable-left-div"style="margin-bottom:10px;" ><label style="margin-left:10px;">' +
                                '<input name="optionKey" class="optionKey" readonly autocomplete="off"  ' +
                                'type="text"value="'+combinationField[index].tree.comment+'" fieldName="'+combinationField[index].tree.fieldName+'" ' +
                                'style="height:28px;"></label><label style="margin-left:10px;">' +
                                '<input name="optionValue" type="text" readonly value="'+combinationField[index].list.comment+'" fieldName="'+combinationField[index].list.fieldName+'"' +
                                ' style="height:28px;"></label><a class="remove layui-btn layui-btn-danger layui-btn-sm" style="padding:0 5px;margin-left:10px;">移除</a></div></td></tr>');
                            $(".row").append(tr);
                        }
                        //禁用选择按钮
                        $("div>.dialogButton").each(function () {
                            $(this).attr("disabled","true");
                            $(this).removeClass("dialogButton");
                            $(this).addClass("layui-btn-disabled");
                        });
                        form.render();
                    } else {
                        layer.alert(result.msg);
                    }
                }
            });
        }

        //关闭弹窗
        var index = parent.layer.getFrameIndex(window.name);
        $(".cancel").on('click',function(){
            parent.layer.close(index);
        });
        //监听select
        form.on('select(province)', function(data){
            treeValue=$(".treeProvince .layui-this").text();
            treeValueField = data.value;
            form.render('select');
        });
        form.on('select(genByForm)', function(data){
            colValue=$(".colgenByForm .layui-this").text();
            listValueField = data.value;
            form.render('select');
        });

        //点击添加
        $(".addRow").on('click',function(){
          if(treeValue !== undefined && colValue !== undefined && treeValue !=="" && colValue !=="" && colValue !== "全部" ){
            var isConditionExist = false;
            var rowData = $(".row");
            rowData.find("tr").each(function () {
                var listFieldName = $(this).find("input[name='optionValue']").val();
                if(listFieldName === listValueField){
                    isConditionExist = true;
                    layer.msg("当前条件已存在！");
                }
            });
            if(!isConditionExist) {
                var tr = '<tr><td><div class="editable-left-div" style="margin-bottom:10px;"><label style="margin-left:10px;"><input name="optionKey" class="optionKey" readonly autocomplete="off" type="text" value="'+treeValue+'" fieldName="'+treeValueField+'" style="height:28px;"></label><label style="margin-left:10px;"><input name="optionValue" type="text" readonly value="'+colValue+'" fieldName="'+listValueField+'" style="height:28px;"></label><a class="remove layui-btn layui-btn-danger layui-btn-sm" style="padding:0 5px;margin-left:10px;">移除</a></div></td></tr>';
                rowData.append($(tr));
                $("div>.dialogButton").each(function () {
                    $(this).attr("disabled", "true");
                    $(this).removeClass("dialogButton");
                    $(this).addClass("layui-btn-disabled");
                });
                form.render();
            }
          }else{
              layer.msg("请选择条件！");
          }

        });
        $(document).on('click', ".remove", function () {
            var that = $(this);
            parent.layer.confirm('确定删除？', {
                btn: ['确定'] //按钮
            }, function (index) {
                parent.layer.close(index);
                that.parents('tr').remove();
                if($(".row").find("tr").length === 0){
                    $("div>.layui-btn-disabled").each(function () {
                        $(this).removeAttr("disabled");
                        $(this).removeClass("layui-btn-disabled");
                        $(this).addClass("dialogButton");
                    });
                    form.render();
                }
            }, function () {
            });

        });
      $(".dialogButton").on('click',function(){
          var dialogInput = $(this).prev();
          var TypeString = dialogInput.attr("class").split(" ")[1];
          var dialogType = 0;
          if(listDialog) {
              var dialogId = listId;
          }
          if(TypeString === "treeDialog"){
              dialogType = 1;
              if(treeDialog) {
                  dialogId = treeId;
              }
          }
          parent.layer.open({
              type: 2,
              title: "对话框弹窗列表",
              shade: 0.3,
              area: ['800px', '500px'],
              content: serverPath.formPath + setter.formLinkPath + "formDialog/combinationDialog/view/dialogChoice?dialogType=" + dialogType + "&dialogId=" + dialogId,
              success: function(layero, index){
                  dialogWin = parent.window[layero.find('iframe')[0]['name']];
              },
              end:function () {
                  var dialogSelect = dialogWin.layui.dialogSelect;
                  if(dialogSelect) {
                      dialogInput.val(dialogSelect.name);
                      addDialogFieldOption(dialogSelect);
                  }
              }
          })
      });
      //生成字段下拉选项
        function addDialogFieldOption(dialogSelect){
            if(dialogSelect != null) {
                var optionHtml = "<option value=''>全部</option>";
                if (dialogSelect.style === 0) {
                    listDialog = dialogSelect;
                    listId = dialogSelect.id;
                    var listArr = dialogSelect.conditionList;
                    for (var i in listArr) {
                        if(listArr[i].defaultType === 4) {
                            optionHtml += "<option value=" + listArr[i].fieldName + ">" + listArr[i].comment + "</option>";
                        }
                    }
                    $("#genByForm").html(optionHtml);
                    form.render();
                } else {
                    treeDialog = dialogSelect;
                    treeId = dialogSelect.id;
                    var treeArr = dialogSelect.returnList;
                    for (var i in treeArr) {
                        optionHtml += "<option value=" + treeArr[i].fieldName + ">" + treeArr[i].comment + "</option>";
                    }
                    $("#province").html(optionHtml);
                    form.render();
                }
                //如果树形和列表对话框都选择好，则显示规则选择
                if (listDialog != null && treeDialog != null) {
                    $(".rule").show();
                }
            }
        }
      //保存
        form.on('submit(save)', function (data) {
            //获取条件字段
            var combinationFiled = [];
            $(".row tr").each(function () {
                var isTree = true;
                var treeField;
                var listField;
                $(this).find('input').each(function () {
                    var fieldName = $(this).attr('fieldName');
                    if(isTree){
                        for(var i in treeDialog.returnList){
                            var treeReturnField = treeDialog.returnList[i];
                            if(treeReturnField.fieldName === fieldName){
                                treeField = treeReturnField;
                            }
                        }
                        isTree = false;
                    }else {
                        for(var i in listDialog.conditionList){
                            var listConditionField = listDialog.conditionList[i];
                            if(listConditionField.fieldName === fieldName){
                                listField = listConditionField;
                            }
                        }
                    }
                });
                combinationFiled.push({"tree":treeField,"list":listField});
            });
            if(combinationFiled.length<=0){
                layer.msg("请选择条件！");
                return false;
            }
            data.field.id = combinationId;
            data.field.treeDialogId = treeId;
            data.field.listDialogId = listId;
            data.field.field = combinationFiled;
            $.ajax({
                url: serverPath.formPath + setter.formLinkPath +"formDialog/combinationDialog/add",
                type: "post",
                contentType: 'application/json',
                dataType: 'json',
                data:JSON.stringify(data.field),
                success: function (result) {
                    if (result.code === 0) {
                        layer.alert(result.msg,{skin: 'btn-class'}, function () {
                            commons._bulletWindow(index);
                        });
                    } else {
                        layer.alert(result.msg);
                    }
                }
            });
            return false;
        });

        //获取组合对话框别名
        $("#combinationName").on('blur', function () {
            var fieldDesc = $(this).val();
            if ($.trim(fieldDesc).length < 1) return;
            var combinationAlias = component.chineseToPinyinAlias(fieldDesc);
            $("#combinationAlias").val(combinationAlias[0]);
        })
    })
</script>
<style>
    body {
        background: #fff;
    }
    .layui-form-select{
        float: left;
        width: 150px;
    }
</style>
    </body>
</html>
